<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";
import { getAssetsFile, convertStringToNumber } from "@visual/utils";

const props = withDefaults(
  defineProps<{
    propValue?: {
      children: any[];
      iconName: string;
      type: string;
      index: number;
      unit: string;
      name: string;
      value: number;
    };
  }>(),
  {
    propValue: () => {
      return {
        children: [
          {
            name: null,
            value: null
          }
        ],
        index: 0,
        unit: "tCO₂e",
        name: "",
        iconName: "co2",
        type: "msg",
        filter: "",
        routerKey: "",
        value: 0
      };
    }
  }
);
const tipClassObj = reactive({
  _msg: props.propValue.type === "msg",
  _warn: props.propValue.type === "warn",
  _error: props.propValue.type === "error"
});

watch(
  () => props.propValue.type,
  val => {
    tipClassObj._msg = val === "msg";
    tipClassObj._warn = val === "warn";
    tipClassObj._error = val === "error";
  }
);
const iconUrl = computed(() => {
  return getAssetsFile(props.propValue.iconName);
});
</script>

<template>
  <div class="w-[100%] h-[100%] flex absolute loc-point-mark">
    <px-tooltip :content="props.propValue?.children ? propValue.children[props.propValue.index]?.name : ''" placement="top" effect="light">
      <div class="_msg-tip box-content flex flex-1 min-w-0 justify-center items-center bg-[#fff] rounded-md p-[12px]">
        <div class="h-[50px] w-[50px] flex justify-center items-center rounded-md flex-none" :class="tipClassObj">
          <img class="tip-icon-img1" :src="iconUrl" />
        </div>
        <div class="flex-1 min-w-0 flex flex-col ml-3">
          <p class="text-[16px] flex-1 min-w-0 font-normal overflow-ellipsis overflow-hidden whitespace-nowrap">
            {{
              props.propValue?.children && propValue.children[props.propValue.index]?.name
                ? propValue.children[props.propValue.index]?.name
                : propValue.name
            }}
          </p>
          <div class="flex items-baseline flex-1 min-w-0">
            <span class="text-[24px] overflow-ellipsis overflow-hidden whitespace-nowrap">{{
              props.propValue?.children && propValue.children[props.propValue.index]?.value
                ? convertStringToNumber(propValue.children[props.propValue.index]?.value)
                : propValue.value
            }}</span>
            <!-- <span class="text-[16px] overflow-ellipsis overflow-hidden whitespace-nowrap">{{
              propValue?.children[props.propValue.index]?.unit ? propValue?.children[props.propValue.index]?.unit : propValue?.unit
            }}</span> -->
          </div>
        </div>
      </div>
    </px-tooltip>
  </div>
</template>

<style lang="scss" scoped>
._msg-tip {
  position: relative;
  width: 100%;
  cursor: pointer;
  outline: none;
}

._msg {
  background-color: #3b82f6;
}

._warn {
  width: 100px;
  height: 67px;
}

._error {
  background-color: #ef4444;
}

._msg-tip::after {
  position: absolute;
  top: 100%; /* Position the arrow at the bottom of the div */
  left: 50%; /* Center the arrow */
  content: "";
  border-color: #fff transparent transparent; /* Create the arrow with borders */
  border-style: solid;
  border-width: 10px;
  transform: translateX(-50%); /* Center the arrow */
}
</style>
